<template>
	<view>
		<view class="page page-sign">
			<view class="sign box-shadow">
				<!-- 已签到的信息 -->
				<view class="part1 flex-row-between flex-start">
					<view class="l">
						<view class="font15">今日{{isSign ? '已' : '未'}}签到</view>
						<view class="font11">本月已签到{{count}}天</view>
					</view>
					<view class="r" @click="openRule">签到规则</view>
				</view>
				<!-- 签到日历 -->
				<uni-calendar :insert="true" :showMonth="false" :selected="selectedData" @monthSwitch="monthSwitch" @change="change"></uni-calendar>
				<!-- 签到按钮 -->
				<view class="btn" @click="signIn">立即签到</view>
			</view>
			<!-- 签到规则 -->
			<view v-if="picture && picture.length > 0" class="rules box-shadow">
				<view class="title font13">连续签到有机会领取以下奖励：</view>
				<view class="flex-row-between">
					<block v-for="(item,index) in picture" :key="index">
						<view class="rule bg-cover" :style="{backgroundImage: 'url(' + (imgPath + item) + ')'}"></view>
					</block>
				</view>
			</view>
		</view>
		<!-- 弹窗-签到规则 -->
		<uni-popup ref="rule" type="center">
			<view class="popup-rule">
				<view class="title font15 tc">签到规则</view>
				<scroll-view :scroll-y="true" class="content">
					<rich-text :nodes="rule"></rich-text>
				</scroll-view>
				<view class="btn-long" @click="closeRule">知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				count: 0, // 签到天数
				isSign: false, // 是否已经签到
				rule: '',
				selectedData: [], // 已签到的日期
				picture: [],
				date: this.$base.formatTime(new Date(), "yyyy-MM-dd")
			}
		},
		onLoad() {
			this.getInfo()
			this.getRule()
		},
		methods: {
			openRule () {
				this.$refs.rule.open()
			},
			closeRule () {
				this.$refs.rule.close()
			},
			// 点击签到
			signIn() {
				this.$Http({
					url: 'signinAdd',
					token: true
				}).then((res) => {
					if (res.code == 1) {
						uni.showToast({ title: '签到成功' });
						this.getInfo();
						this.isSign = true;
					} else {
						uni.showToast({ title: res.msg, icon: 'none' });
					}
				});
			},
			// 获取月签到信息
			getInfo(month) {
				this.$Http({
					url: 'signin',
					token: true,
					data: { time: month ? month : this.$base.formatTime(new Date(), "yyyy-MM")}
				}).then((res) => {
					if (res.code == 1) {
						let $arr = []
						res.data.days.forEach((item)=>{
							$arr.push({
								date: res.data.time + '-' + item,
								info: '已签到'
							})
						})
						this.selectedData = $arr
						
						this.isSign = this.selectedData.some(item=>{
						   return item.date == this.date
						})
						
						this.count = res.data.count
						this.picture = res.data.ad
					}
				})
			},
			// 获取签到规则
			getRule() {
				this.$Http({
					url: 'signinRule'
				}).then((res) => {
					if (res.code == 1) {
						this.rule = res.data
					}
				})
			},
			// 点击日期
			change (e) {
				this.getInfo(e.year.toString() + '-' + e.month)
			},
			// 切换月份
			monthSwitch (e) {
				this.getInfo(e.year.toString() + '-' + e.month)
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
